<template>
	<div>
		<detail-banner :gallaryImgs="gallaryImgs" :bannerImg="bannerImg"  :sightName="sightName"></detail-banner>
		<detail-header  :sightName="sightName"></detail-header>
		<detail-list :data="categoryList"></detail-list>
	</div>
</template>

<script type="text/javascript">
	import axios from 'axios'
	import DetailBanner from './components/banner'
	import DetailHeader from './components/header'
	import DetailList from './components/list'
	export default {
		name: 'detail',
		data () {
			return {
				categoryList: [],
				bannerImg: '',
				gallaryImgs: [],
				sightName: ''
			}	
		},
		components: {
			DetailBanner,
			DetailHeader,
			DetailList,
		},
		methods: {
			async handleGetCityInfoSucc () {
				let result =	await	axios.get('/api/detail.json?',{
						params: {
							id: this.$route.id
						}
					});
				let data = result.data.data;
				this.categoryList = data.categoryList;
				this.bannerImg = data.bannerImg;
				this.gallaryImgs = data.gallaryImgs;
				this.sightName = data.sightName
			}
		},
		mounted () {
			this.handleGetCityInfoSucc();
		}
	}
</script>

<style lang="stylus" scoped></style>
